<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('货位一览')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }
        .container-div {
            padding: 5px;
            display: flex;
        }
        .aside {
            width: 120px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .aside .el-button {
            margin-top: 12px;
        }
        .el-button+.el-button {
            margin-left: 0!important;
        }
        .aside .tag {
            width: 85px;
            height: 32px;
            color: #000000;
            text-align: center;
            line-height: 32px;
            border-radius: 5px;
            margin-bottom: 12px;
        }
        .notHave {
            background: #d3d3d3;
        }
        .have {
            background: #7CCD7C;
        }
        .billOutIng {
            background: #FFC0CB;
        }
        .billInIng {
            background: #FFFF00;
        }
        .billInCheck {
            background: #FFA500;
        }
        .billOutCheck {
            background: #E9967A;
        }
        .main {
            width: calc(100% - 120px);
            height: 100%;
            display: flex;
        }
        .tableBox {
            width: 780px;
            height: 100%;
            margin: 0 8px;
            display: flex;
            flex-direction: column;
        }
        .shelfBar {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .shelfName {
            width: 100px;
            height: 32px;
            color: #000000;
            text-align: center;
            line-height: 32px;
            border-radius: 5px;
            background: #B3C0D1;
        }
        .shelfName:nth-child(1), .shelfName:nth-child(5) {
            width: 80px;
            background: none;
        }
        .cellBox {
            width: 100%;
            height: calc(100% - 50px);
            display: flex;
            justify-content: space-around;
            overflow: auto;
        }
        .cellBox::-webkit-scrollbar {
            display: none;
        }
        .pai {
            width: 100px;
            height: fit-content;
            padding-top: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .2);
            border-radius: 5px;
        }
        .pai:nth-child(1), .pai:nth-child(5) {
            width: 80px;
            box-shadow: none;
        }
        .lieName {
            width: 65px;
            height: 32px;
            color: #000000;
            text-align: center;
            line-height: 32px;
            border-radius: 5px;
            background: #E9EEF3;
            margin-bottom: 10px;
        }
        .lieName:last-child {
            margin-bottom: 0;
        }
        .cell {
            width: 80px;
            height: 32px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .el-input.is-disabled .el-input__inner {
            width: 200px!important;
            color: #000000!important;
        }
        .percent {
            width: calc(100% - 796px);
            height: 100%;
            position: relative;
        }
        #seat {
            position: absolute;
            left: 3.5%;
            top: 60px;
        }
        .chartsBox {
            width: 100%;
            height: 85%;
            position: absolute;
            left: 0;
            bottom: 3%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            padding: 0 3.5%;
        }
        .cards {
            width: 48%;
            height: 32%;
        }
        .myCharts {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="container-div">
    <!-- 楼层选择及货位状态 -->
    <div class="aside">
        <!-- 楼层选择 -->
        <el-button v-for="(item, index) in floorList" :key="index" :plain="checkFloorId != item.id" type="primary" @click="getFloorId(item.id)" v-cloak>
            {{item.text}}层
        </el-button>
        <!-- 分割线 -->
        <el-divider></el-divider>
        <!-- 货位状态 -->
        <span v-for="(item, index) in statusList" :key="index" class="tag" :class="item.colorClass" v-cloak>{{item.stateText}}</span>
    </div>
    <!-- 显示内容区域 -->
    <div class="main">
        <!-- 货位 -->
        <div class="tableBox">
            <!-- 对应缓存线 -->
            <div class="shelfBar">
                <div class="shelfName"></div>
                <div class="shelfName" v-cloak>HC-A{{checkFloorId}} 入口</div>
                <div class="shelfName" v-cloak>HC-B{{checkFloorId}} 入口</div>
                <div class="shelfName" v-cloak>HC-C{{checkFloorId}} 入口</div>
                <div class="shelfName"></div>
                <div class="shelfName" v-cloak>HC-D{{checkFloorId}} 入口</div>
                <div class="shelfName" v-cloak>HC-E{{checkFloorId}} 入口</div>
            </div>
            <!-- 对应货位 -->
            <div class="cellBox">
                <!-- 列名 -->
                <div class="pai">
                    <div class="lieName" v-for="(item, index) in lieNameList" :key="index" v-cloak>{{item}}</div>
                </div>
                <!-- HC-A线 -->
                <div class="pai">
                    <div class="cell" v-for="(item, index) in cellListA" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'billOutIng' : '', item.state == 3 ? 'billInIng' : '', item.state == 5 ? 'billInCheck' : '', item.state == 6 ? 'billOutCheck' : '']"></div>
                </div>
                <!-- HC-B线 -->
                <div class="pai">
                    <div class="cell" v-for="(item, index) in cellListB" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'billOutIng' : '', item.state == 3 ? 'billInIng' : '', item.state == 5 ? 'billInCheck' : '', item.state == 6 ? 'billOutCheck' : '']"></div>
                </div>
                <!-- HC-C线 -->
                <div class="pai">
                    <div class="cell" v-for="(item, index) in cellListC" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'billOutIng' : '', item.state == 3 ? 'billInIng' : '', item.state == 5 ? 'billInCheck' : '', item.state == 6 ? 'billOutCheck' : '']"></div>
                </div>
                <div class="pai"></div>
                <!-- HC-D线 -->
                <div class="pai">
                    <div class="cell" v-for="(item, index) in cellListD" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'billOutIng' : '', item.state == 3 ? 'billInIng' : '', item.state == 5 ? 'billInCheck' : '', item.state == 6 ? 'billOutCheck' : '']"></div>
                </div>
                <!-- HC-E线 -->
                <div class="pai">
                    <div class="cell" v-for="(item, index) in cellListE" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'billOutIng' : '', item.state == 3 ? 'billInIng' : '', item.state == 5 ? 'billInCheck' : '', item.state == 6 ? 'billOutCheck' : '']"></div>
                </div>
            </div>
        </div>
        <!-- 货位详情弹出框 -->
        <el-dialog title="货位详情" width="400px" :visible.sync="showMsgState" append-to-body="true">
            <el-row>
                <el-form :inline="true" label-width="100px" :model="msgInfo" class="demo-ruleForm">
                    <el-form-item size="small" label="货位编码:">
                        <el-input v-model="msgInfo.cellCode" disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item size="small" label="货位描述:">
                        <el-input v-model="msgInfo.memo" disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item size="small" label="货位状态:">
                        <el-input v-model="msgInfo.stateText" disabled="true"></el-input>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-dialog>
        <!-- 利用率 -->
        <div class="percent">
            <!-- hover显示货位位置 -->
            <el-tag id="seat" effect="dark" v-show="seatState" v-cloak>{{location}}</el-tag>
            <!-- 各缓存线图表 -->
            <div class="chartsBox">
                <el-card class="cards" body-style="padding: 0;display: flex;height: 100%" shadow="hover">
                    <div id="chartA" class="myCharts"></div>
                </el-card>
                <el-card class="cards" body-style="padding: 0;display: flex;height: 100%" shadow="hover">
                    <div id="chartB" class="myCharts"></div>
                </el-card>
                <el-card class="cards" body-style="padding: 0;display: flex;height: 100%" shadow="hover">
                    <div id="chartC" class="myCharts"></div>
                </el-card>
                <el-card class="cards" body-style="padding: 0;display: flex;height: 100%" shadow="hover">
                    <div id="chartD" class="myCharts"></div>
                </el-card>
                <el-card class="cards" body-style="padding: 0;display: flex;height: 100%" shadow="hover">
                    <div id="chartE" class="myCharts"></div>
                </el-card>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/echarts/echarts.js}"></script>
<script th:inline="javascript">
    var vue = new Vue({
        el: '.container-div',
        data: {
            //楼层列表
            floorList: [
                {id: '6', text: '六'},
                {id: '5', text: '五'},
                {id: '4', text: '四'},
                {id: '3', text: '三'},
                {id: '2', text: '二'}
            ],
            //选择的楼层id
            checkFloorId: '2',
            //货位状态列表
            statusList: [
                {colorClass: 'notHave', stateText: '无货'},
                {colorClass: 'have', stateText: '有货'},
                {colorClass: 'billOutIng', stateText: '出库中'},
                {colorClass: 'billInIng', stateText: '入库中'},
                {colorClass: 'billInCheck', stateText: '入库盘点'},
                {colorClass: 'billOutCheck', stateText: '出库盘点'}
            ],
            //列的集合
            lieNameList: ['1列', '2列', '3列', '4列', '5列', '6列', '7列', '8列', '9列', '10列', '11列', '12列', '13列', '14列', '15列', '16列', '17列', '18列', '19列', '20列',
                '21列', '22列', '23列', '24列', '25列', '26列', '27列', '28列', '29列', '30列', '31列', '32列', '33列', '34列', '35列', '36列', '37列', '38列', '39列', '40列',
                '41列', '42列', '43列', '44列'],
            //每层各缓存线对应的货位列表
            cellListA: [],
            cellListB: [],
            cellListC: [],
            cellListD: [],
            cellListE: [],
            //hover显示货位位置信息状态
            seatState: false,
            //hover显示货位位置信息
            location: '',
            //货位详情弹出框状态
            showMsgState: false,
            //货位详情弹出框信息
            msgInfo: {},
        },
        methods: {
            //获取楼层id
            getFloorId(id){
                this.checkFloorId = id;
                this.getMsg(id);
            },
            //获取货位信息
            getMsg(id){
                var that = this;
                that.cellListA = [];
                that.cellListB = [];
                that.cellListC = [];
                that.cellListD = [];
                that.cellListE = [];
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/cellInfo/findByCellInfoDto",
                    data: {
                        sFloor: id
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        var list = data.rows;
                        for(var i = 0; i < list.length; i++){
                            if(list[i].sPai == 1){
                                that.cellListA.push(list[i]);
                            }else if(list[i].sPai == 2){
                                that.cellListB.push(list[i]);
                            }else if(list[i].sPai == 3){
                                that.cellListC.push(list[i]);
                            }else if(list[i].sPai == 4){
                                that.cellListD.push(list[i]);
                            }else if(list[i].sPai == 5){
                                that.cellListE.push(list[i]);
                            }
                        }
                    }
                });
            },
            //hover显示某个货位位置
            showSeat(e){
                this.location = '';
                if(e){
                    this.seatState = true;
                    this.location = e;
                }else{
                    this.seatState = false;
                }
            },
            //显示某个货位信息
            showMsg(e){
                this.showMsgState = true;
                this.msgInfo = e;
                if(this.msgInfo.state == 0){
                    this.msgInfo.stateText = "无货";
                }else if(this.msgInfo.state == 1){
                    this.msgInfo.stateText = "有货";
                }else if(this.msgInfo.state == 2){
                    this.msgInfo.stateText = "出库中";
                }else if(this.msgInfo.state == 3){
                    this.msgInfo.stateText = "入库中";
                }else if(this.msgInfo.state == 5){
                    this.msgInfo.stateText = "入库盘点";
                }else if(this.msgInfo.state == 6){
                    this.msgInfo.stateText = "出库盘点";
                }
            },
            //A缓存线图表
            drawChartA(){
                var notHave = 0;
                var have = 0;
                var billOutIng = 0;
                var billInIng = 0;
                var billInCheck = 0;
                var billOutCheck = 0;
                for(var i = 0; i < this.cellListA.length; i++){
                    if(this.cellListA[i].state == 0){
                        notHave += 1;
                    }else if(this.cellListA[i].state == 1){
                        have += 1;
                    }else if(this.cellListA[i].state == 2){
                        billOutIng += 1;
                    }else if(this.cellListA[i].state == 3){
                        billInIng += 1;
                    }else if(this.cellListA[i].state == 5){
                        billInCheck += 1;
                    }else if(this.cellListA[i].state == 6){
                        billOutCheck += 1;
                    }
                }
                var num = have + billOutIng + billInIng + billInCheck + billOutCheck;
                var innerRing = [
                    {value: notHave, name: '空货位'},
                    {value: num, name: '已占货位'}
                ];
                var outerRing = [
                    {value: notHave, name: '无货'},
                    {value: have, name: '有货'},
                    {value: billOutIng, name: '出库中'},
                    {value: billInIng, name: '入库中'},
                    {value: billInCheck, name: '入库盘点'},
                    {value: billOutCheck, name: '出库盘点'}
                ];
                var chartA = echarts.init(document.getElementById('chartA'));
                chartA.setOption({
                    title: {
                        text: 'HC-A' + this.checkFloorId + '线货位详情',
                        x: 'center',
                        y: '5px'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}<br/>占比： {d}%'
                    },
                    series: [
                        {
                            name: '是否有货',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ['15%', '50%'],
                            center: ['50%', '57%'],
                            label: {
                                position: 'inner'
                            },
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            labelLine: {
                                show: false
                            },
                            color: ['#696969', '#4bddc8'],
                            data: innerRing
                        },
                        {
                            name: '货位状态',
                            type: 'pie',
                            radius: ['50%', '80%'],
                            center: ['50%', '57%'],
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: ['#d3d3d3', '#7CCD7C', '#FFC0CB', '#FFFF00', '#FFA500', '#E9967A'],
                            data: outerRing
                        }
                    ]
                }, true)
            },
            //B缓存线图表
            drawChartB(){
                var notHave = 0;
                var have = 0;
                var billOutIng = 0;
                var billInIng = 0;
                var billInCheck = 0;
                var billOutCheck = 0;
                for(var i = 0; i < this.cellListB.length; i++){
                    if(this.cellListB[i].state == 0){
                        notHave += 1;
                    }else if(this.cellListB[i].state == 1){
                        have += 1;
                    }else if(this.cellListB[i].state == 2){
                        billOutIng += 1;
                    }else if(this.cellListB[i].state == 3){
                        billInIng += 1;
                    }else if(this.cellListB[i].state == 5){
                        billInCheck += 1;
                    }else if(this.cellListB[i].state == 6){
                        billOutCheck += 1;
                    }
                }
                var num = have + billOutIng + billInIng + billInCheck + billOutCheck;
                var innerRing = [
                    {value: notHave, name: '空货位'},
                    {value: num, name: '已占货位'}
                ];
                var outerRing = [
                    {value: notHave, name: '无货'},
                    {value: have, name: '有货'},
                    {value: billOutIng, name: '出库中'},
                    {value: billInIng, name: '入库中'},
                    {value: billInCheck, name: '入库盘点'},
                    {value: billOutCheck, name: '出库盘点'}
                ];
                var chartB = echarts.init(document.getElementById('chartB'));
                chartB.setOption({
                    title: {
                        text: 'HC-B' + this.checkFloorId + '线货位详情',
                        x: 'center',
                        y: '5px'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}<br/>占比： {d}%'
                    },
                    series: [
                        {
                            name: '是否有货',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ['15%', '50%'],
                            center: ['50%', '57%'],
                            label: {
                                position: 'inner'
                            },
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            labelLine: {
                                show: false
                            },
                            color: ['#696969', '#4bddc8'],
                            data: innerRing
                        },
                        {
                            name: '货位状态',
                            type: 'pie',
                            radius: ['50%', '80%'],
                            center: ['50%', '57%'],
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: ['#d3d3d3', '#7CCD7C', '#FFC0CB', '#FFFF00', '#FFA500', '#E9967A'],
                            data: outerRing
                        }
                    ]
                }, true)
            },
            //C缓存线图表
            drawChartC(){
                var notHave = 0;
                var have = 0;
                var billOutIng = 0;
                var billInIng = 0;
                var billInCheck = 0;
                var billOutCheck = 0;
                for(var i = 0; i < this.cellListC.length; i++){
                    if(this.cellListC[i].state == 0){
                        notHave += 1;
                    }else if(this.cellListC[i].state == 1){
                        have += 1;
                    }else if(this.cellListC[i].state == 2){
                        billOutIng += 1;
                    }else if(this.cellListC[i].state == 3){
                        billInIng += 1;
                    }else if(this.cellListC[i].state == 5){
                        billInCheck += 1;
                    }else if(this.cellListC[i].state == 6){
                        billOutCheck += 1;
                    }
                }
                var num = have + billOutIng + billInIng + billInCheck + billOutCheck;
                var innerRing = [
                    {value: notHave, name: '空货位'},
                    {value: num, name: '已占货位'}
                ];
                var outerRing = [
                    {value: notHave, name: '无货'},
                    {value: have, name: '有货'},
                    {value: billOutIng, name: '出库中'},
                    {value: billInIng, name: '入库中'},
                    {value: billInCheck, name: '入库盘点'},
                    {value: billOutCheck, name: '出库盘点'}
                ];
                var chartC = echarts.init(document.getElementById('chartC'));
                chartC.setOption({
                    title: {
                        text: 'HC-C' + this.checkFloorId + '线货位详情',
                        x: 'center',
                        y: '5px'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}<br/>占比： {d}%'
                    },
                    series: [
                        {
                            name: '是否有货',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ['15%', '50%'],
                            center: ['50%', '57%'],
                            label: {
                                position: 'inner'
                            },
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            labelLine: {
                                show: false
                            },
                            color: ['#696969', '#4bddc8'],
                            data: innerRing
                        },
                        {
                            name: '货位状态',
                            type: 'pie',
                            radius: ['50%', '80%'],
                            center: ['50%', '57%'],
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: ['#d3d3d3', '#7CCD7C', '#FFC0CB', '#FFFF00', '#FFA500', '#E9967A'],
                            data: outerRing
                        }
                    ]
                }, true)
            },
            //D缓存线图表
            drawChartD(){
                var notHave = 0;
                var have = 0;
                var billOutIng = 0;
                var billInIng = 0;
                var billInCheck = 0;
                var billOutCheck = 0;
                for(var i = 0; i < this.cellListD.length; i++){
                    if(this.cellListD[i].state == 0){
                        notHave += 1;
                    }else if(this.cellListD[i].state == 1){
                        have += 1;
                    }else if(this.cellListD[i].state == 2){
                        billOutIng += 1;
                    }else if(this.cellListD[i].state == 3){
                        billInIng += 1;
                    }else if(this.cellListD[i].state == 5){
                        billInCheck += 1;
                    }else if(this.cellListD[i].state == 6){
                        billOutCheck += 1;
                    }
                }
                var num = have + billOutIng + billInIng + billInCheck + billOutCheck;
                var innerRing = [
                    {value: notHave, name: '空货位'},
                    {value: num, name: '已占货位'}
                ];
                var outerRing = [
                    {value: notHave, name: '无货'},
                    {value: have, name: '有货'},
                    {value: billOutIng, name: '出库中'},
                    {value: billInIng, name: '入库中'},
                    {value: billInCheck, name: '入库盘点'},
                    {value: billOutCheck, name: '出库盘点'}
                ];
                var chartD = echarts.init(document.getElementById('chartD'));
                chartD.setOption({
                    title: {
                        text: 'HC-D' + this.checkFloorId + '线货位详情',
                        x: 'center',
                        y: '5px'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}<br/>占比： {d}%'
                    },
                    series: [
                        {
                            name: '是否有货',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ['15%', '50%'],
                            center: ['50%', '57%'],
                            label: {
                                position: 'inner'
                            },
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            labelLine: {
                                show: false
                            },
                            color: ['#696969', '#4bddc8'],
                            data: innerRing
                        },
                        {
                            name: '货位状态',
                            type: 'pie',
                            radius: ['50%', '80%'],
                            center: ['50%', '57%'],
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: ['#d3d3d3', '#7CCD7C', '#FFC0CB', '#FFFF00', '#FFA500', '#E9967A'],
                            data: outerRing
                        }
                    ]
                }, true)
            },
            //E缓存线图表
            drawChartE(){
                var notHave = 0;
                var have = 0;
                var billOutIng = 0;
                var billInIng = 0;
                var billInCheck = 0;
                var billOutCheck = 0;
                for(var i = 0; i < this.cellListE.length; i++){
                    if(this.cellListE[i].state == 0){
                        notHave += 1;
                    }else if(this.cellListE[i].state == 1){
                        have += 1;
                    }else if(this.cellListE[i].state == 2){
                        billOutIng += 1;
                    }else if(this.cellListE[i].state == 3){
                        billInIng += 1;
                    }else if(this.cellListE[i].state == 5){
                        billInCheck += 1;
                    }else if(this.cellListE[i].state == 6){
                        billOutCheck += 1;
                    }
                }
                var num = have + billOutIng + billInIng + billInCheck + billOutCheck;
                var innerRing = [
                    {value: notHave, name: '空货位'},
                    {value: num, name: '已占货位'}
                ];
                var outerRing = [
                    {value: notHave, name: '无货'},
                    {value: have, name: '有货'},
                    {value: billOutIng, name: '出库中'},
                    {value: billInIng, name: '入库中'},
                    {value: billInCheck, name: '入库盘点'},
                    {value: billOutCheck, name: '出库盘点'}
                ];
                var chartE = echarts.init(document.getElementById('chartE'));
                chartE.setOption({
                    title: {
                        text: 'HC-E' + this.checkFloorId + '线货位详情',
                        x: 'center',
                        y: '5px'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}<br/>占比： {d}%'
                    },
                    series: [
                        {
                            name: '是否有货',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ['15%', '50%'],
                            center: ['50%', '57%'],
                            label: {
                                position: 'inner'
                            },
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            labelLine: {
                                show: false
                            },
                            color: ['#696969', '#4bddc8'],
                            data: innerRing
                        },
                        {
                            name: '货位状态',
                            type: 'pie',
                            radius: ['50%', '80%'],
                            center: ['50%', '57%'],
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: ['#d3d3d3', '#7CCD7C', '#FFC0CB', '#FFFF00', '#FFA500', '#E9967A'],
                            data: outerRing
                        }
                    ]
                }, true)
            }
        },
        created(){
            this.getMsg(this.checkFloorId);
        },
        mounted(){
            this.drawChartA();
            this.drawChartB();
            this.drawChartC();
            this.drawChartD();
            this.drawChartE();
        },
        watch: {
            'checkFloorId': {
                handler: function(){
                    this.drawChartA();
                    this.drawChartB();
                    this.drawChartC();
                    this.drawChartD();
                    this.drawChartE();
                }
            }
        }
    })
</script>
</body>
</html>
